<template>
  <div class="home-descript">
    <div class="header-content">
      <h2 class="animate">Welcome My Blog!</h2>
      <button  class="animate" @click="$router.push('/blog')">Enter Blog</button>
      <i class="el-icon-arrow-down animate" @click="change"></i>
    </div>
    <div class="des_title">
      <div class="des_wrap animate">
        <h2>前端学问</h2>
        <p>"懒"对我来说有很大学问,在码代码时 懒可以写出高质量代码,但是不能缺少学习的激情</p>
      </div>
    </div>
    <ul>
      <li
        class="animate"
        v-for="(item,index) of arr"
        :key="index"
        :style="{backgroundColor:'rgb('+item.bg+')'}"
      >
        <div class="descript">
          <span class="iconfont">{{item.img}}</span>
          <h3>{{item.title}}</h3>
          <p>{{item.descript}}</p>
        </div>
      </li>
    </ul>
    <p class="footer">
      <router-link to="/about" tag="button" class="animate">关于</router-link>
      <router-link to="/diary" tag="button" class="animate">+日记</router-link>
    </p>
    <div class="person">
      <h2 class="animate">懒人码农</h2>
      <p class="animate">爱好广泛,懒人虽懒,唯独代码让我废寝忘食!!</p>
    </div>
  </div>
</template>

<script>
let arr = [
  {
    img: "\ue63c",
    title: "javaScript",
    descript:
      "是一种脚本语言一种广泛用于客户端Web开发的脚本语言，js语法越来越趋向java等后端语言,尤其在ES6,面向对象编程尤为体现",
    bg: "126,87,194"
  },
  {
    img: "\ue6ba",
    title: "Vue",
    descript:
      "vue是目前国内最为流行的一中框架,也是我最下功夫学习的,可能是因为开发习惯了,react对我来说不是那么的顺手,并不是不会用",
    bg: "171,17,188"
  },
  {
    img: "\ue69d",
    title: "Node",
    descript:
      "想要做一个合格的前端工程师,学习node是个很好的建议,我个人习惯用node结合mongodb来完成全栈开发,node学习势在必行",
    bg: "38,166,154"
  },
  {
    img: "\ue632",
    title: "HTML",
    descript:
      "html是前端之基础,刚开始自学完成html+css有点骄傲,但那肯定是傻乎乎的行为",
    bg: "41,182,246"
  }
];
//DOM距离页面顶部的距离
function getTop(node){
    let top=0;
    while(node!==document.body){
        top+=node.offsetTop;
        node=node.offsetParent
    }
    return top
}
export default {
  data() {
    return {
      arr: arr,
      top:50,
    };
  },
  mounted() {
    this.showIcon()
    window.addEventListener("scroll", this.showIcon);
  },
  methods: {
    showIcon() {
      let ani = document.querySelectorAll(".animate");
      let scrollTop=document.documentElement.scrollTop+window.innerHeight
      ani.forEach(node => {
        if(scrollTop>getTop(node)){
            node.classList.remove("animate")
        }
      });
    },
    change(){
        var timer=setInterval(() => {
            document.documentElement.scrollTop+=this.top
            if(document.documentElement.scrollTop>=600){
                clearInterval(timer)
            }
        }, 10);
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.showIcon);
  }
};
</script>

<style lang="less" scoped>
.home-descript {
  .header-content {
    position: relative;
    width: 100%;
    height: 400px;
    text-align: center;
    @media screen and(max-width:800px) {
      margin: 200px auto 0;
    }
    i {
      position: absolute;
      bottom: 40px;
      left: 50%;
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin-left: -17.5px;
      font-size: 35px;
      color: white;
      font-weight: bold;
      border-radius: 50%;
      transition: 1s;
      &:hover {
        background: rgb(107, 195, 13);
        cursor: pointer;
      }
    }
    i.animate{
        bottom:0px;
    }
    h2 {
      margin-bottom: 50px;
      margin-top: 180px;
      color:white;
      text-shadow: 3px 3px 3px black;
      font-size: 30px;
      transition: 1.5s;
    }
    h2.animate{
        transform: scale(.3);
    }
    button {
      width: 100px;
      height: 40px;
      border: none;
      background-color: #1e9fff;
      font-size: 14px;
      color: white;
      border-radius: 3px;
      transition: 1.5s;
      &:hover {
        opacity: 0.7;
      }
    }
    button.animate{
        transform: scale(.3);
    }
  }
  width: 100%;
  @media screen and (max-width: 800px) {
    ul {
      display: block !important;
      margin-top: 155px;
    }
    li {
      width: 100% !important;
      .descript {
        margin: 0 !important;
      }
    }
  }
  .des_title {
    width: 100%;
    padding-top: 10px;
    height: 190px;
    background-color: white;
    text-align: center;
    .des_wrap{
        transition: 1s;
    }
    > .animate {
      margin-top: -70px;
      opacity: 0;
    }
    h2 {
      position: relative;
      margin-top: 60px;
      &::after {
        position: absolute;
        left: 50%;
        margin-left: -25px;
        top: 35px;
        content: "";
        display: block;
        width: 50px;
        height: 3px;
        background: #00c2ff;
      }
    }
    p {
      line-height: 100px;
      color: #888;
      font-size: 14px;
    }
  }
  ul {
    display: flex;
    width: 100%;
    height: 100%;
    li {
      box-sizing: border-box;
      width: 25%;
      height: 380px;
      text-align: center;
      .descript {
        padding: 40px;
        color: white;
        transition: 1.5s;
        span {
          font-size: 30px;
        }
        h3 {
          margin: 50px 0 30px;
          font-size: 24px;
        }
        p {
          line-height: 30px;
          font-size: 14px;
        }
      }
    }
    .animate {
      margin-top: 200px;
      opacity: 0;
    }
    li:nth-child(1) {
      transition: 0.5s;
    }
    li:nth-child(2) {
      transition: 1s;
    }
    li:nth-child(3) {
      transition: 1.5s;
    }
    li:nth-child(4) {
      transition: 2s;
    }
  }
  .person {
    padding-top: 20px;
    width: 100%;
    height: 230px;
    background-color: white;
    text-align: center;
    h2 {
      margin-top: 50px;
      line-height: 60px;
      transition: 1.5s;
    }
    h2.animate {
      margin-right: 90%;
      opacity: 0;
    }
    p {
      font-size: 14px;
      transition: 1.5s;
    }
    p.animate {
      margin-left: 80%;
      opacity: 0;
    }
  }
  .footer {
    height: 300px;
    text-align: center;
    line-height: 300px;
    button {
      position: relative;
      z-index: 1;
      width: 200px;
      height: 50px;
      border: 1px solid white;
      background-color: transparent;
      color: white;
      padding: 0;
      transition: 1s;
      &::before {
        position: absolute;
        top: 0;
        z-index: -1;
        content: "";
        display: block;
        width: 0;
        height: 100%;
        background: rgb(107, 195, 13);
        transition: 0.6s linear;
      }
      &:hover::before {
        width: 100%;
      }
    }
    button:nth-child(2) {
      margin-left: 40px;
    }
    .animate {
      opacity: 0;
    }
    .animate:nth-child(1) {
      margin-right: 300px;
    }
  }
}
</style>